<%@page import="Logic.ApprovalSidebar"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>


<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=8">
<title>NYP QMS</title>



<link rel="stylesheet" href="css/layout.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="css/header.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="css/jquery.ui.all.css" type="text/css"
	media="screen" />

<link href="css/style2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript"
	src="js/vpb_script.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('.namepass').keyup(function() {

			var empty = false;
			$('.namepass').each(function() {
				if ($(this).val().length == 0) {
					empty = true;
				}
			});

			if (empty) {
				$('#loginsubmit').attr('disabled', 'disabled');
				$('#loginsubmit').removeClass('disablebtn');
				$('#loginsubmit').addClass('disablebtn');
			} else {
				$('#loginsubmit').removeAttr('disabled');
				$('#loginsubmit').removeClass('disablebtn');
				$('#loginsubmit').addClass('disablebtn');

			}
		});

		$('.namepass2').keyup(function() {

			var empty = false;
			$('.namepass2').each(function() {
				if ($(this).val().length == 0) {
					empty = true;
				}
			});

			if (empty) {
				$('#loginsubmit2').attr('disabled', 'disabled');
				$('#loginsubmit2').removeClass('disablebtn');
				$('#loginsubmit2').addClass('disablebtn');
			} else {
				$('#loginsubmit2').removeAttr('disabled');
				$('#loginsubmit2').removeClass('disablebtn');
				$('#loginsubmit2').addClass('disablebtn');

			}
		});

	});

	function signout() {
		vpb_show_login_box();

	}
</script>

<style type='text/css'>
#Table_01 {
	border-spacing: 0;
}

#Table_01 tr,td {
	vertical-align: bottom;
	padding: 0;
}

#Table_01 img {
	display: block;
	vertical-align: bottom
}

#Table_01 tr td a {
	display: block;
	width: 100%;
	height: 100%;
}

#Table_02 {
	border-spacing: 0;
	padding: 0;
}

#Table_02 tr,td {
	vertical-align: bottom
}

#Table_02 img {
	display: block;
	vertical-align: bottom
}

#Table_02 tr td a {
	display: block;
	width: 100%;
	height: 100%;
}

#Table_03 {
	border-spacing: 0;
}

#Table_03 tr,td {
	vertical-align: bottom;
	padding: 0;
}
</style>

<!--[if lt IE 9]>
	<script>
	document.createElement('header');
	document.createElement('nav');
	document.createElement('section');
	document.createElement('article');
	document.createElement('aside');
	document.createElement('footer');</script>
	<![endif]-->

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<!-- <script src="js/jquery-ui-1.10.0.custom.js" type="text/javascript"></script> -->
<!-- <script src="js/jquery.ui.core.js" type="text/javascript"></script> -->
<!-- <script src="js/jquery.ui.dialog.js" type="text/javascript"></script> -->
<!--<script src="js/hideshow.js" type="text/javascript"></script>-->
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.equalHeight.js"></script>

<!--  
<link rel="stylesheet" type="text/css" href="css/jquery.ui.tooltip.css" />
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.effect.js"></script>
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.tooltip.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
-->

<script type="text/javascript">
	$(document).ready(function() {
		$(".tablesorter").tablesorter();
	});
	$(document).ready(function() {

		//When page loads...
		$(".tab_content").hide(); //Hide all content
		$("ul.tabs li:first").addClass("active").show(); //Activate first tab
		$(".tab_content:first").show(); //Show first tab content

		//On Click Event
		$("ul.tabs li").click(function() {

			$("ul.tabs li").removeClass("active"); //Remove any "active" class
			$(this).addClass("active"); //Add "active" class to selected tab
			$(".tab_content").hide(); //Hide all tab content

			var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
			$(activeTab).fadeIn(); //Fade in the active ID content
			return false;
		});

	});
</script>
<script type="text/javascript">
	$(function() {
		$('.column').equalHeight();
	});
</script>

<!-- Calendar Script -->
<link rel="stylesheet" type="text/css" media="all"
	href="calendar/jsDatePick_ltr.min.css" />
<!-- 
	OR if you want to use the calendar in a right-to-left website
	just use the other CSS file instead and don't forget to switch g_jsDatePickDirectionality variable to "rtl"!
	
	<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.css" />
-->
<script type="text/javascript" src="calendar/jsDatePick.min.1.3.js"></script>
<!-- 
	After you copied those 2 lines of code , make sure you take also the files into the same folder :-)
    Next step will be to set the appropriate statement to "start-up" the calendar on the needed HTML element.
    
    The first example of Javascript snippet is for the most basic use , as a popup calendar
    for a text field input.
-->
<script type="text/javascript">
	window.onload = function() {
		new JsDatePick({
			useMode : 2,
			target : "inputField",
			dateFormat : "%j %M %Y"
		/*selectedDate:{				This is an example of what the full configuration offers.
			day:5,						For full documentation about these settings please see the full version of the code.
			month:9,
			year:2006
		},
		yearsRange:[1978,2020],
		limitToToday:false,
		cellColorScheme:"beige",
		dateFormat:"%m-%d-%Y",
		imgPath:"img/",
		weekStartDay:1*/
		});
		new JsDatePick({
			useMode : 2,
			target : "inputField3",
			dateFormat : "%j %M %Y"
		/*selectedDate:{				This is an example of what the full configuration offers.
			day:5,						For full documentation about these settings please see the full version of the code.
			month:9,
			year:2006
		},
		yearsRange:[1978,2020],
		limitToToday:false,
		cellColorScheme:"beige",
		dateFormat:"%m-%d-%Y",
		imgPath:"img/",
		weekStartDay:1*/
		});
		new JsDatePick({
			useMode : 2,
			target : "inputField2",
			dateFormat : "%j %M %Y"
		/*selectedDate:{				This is an example of what the full configuration offers.
			day:5,						For full documentation about these settings please see the full version of the code.
			month:9,
			year:2006
		},
		yearsRange:[1978,2020],
		limitToToday:false,
		cellColorScheme:"beige",
		dateFormat:"%m-%d-%Y",
		imgPath:"img/",
		weekStartDay:1*/
		});
		new JsDatePick({
			useMode : 2,
			target : "inputField4",
			dateFormat : "%j %M %Y"
		/*selectedDate:{				This is an example of what the full configuration offers.
			day:5,						For full documentation about these settings please see the full version of the code.
			month:9,
			year:2006
		},
		yearsRange:[1978,2020],
		limitToToday:false,
		cellColorScheme:"beige",
		dateFormat:"%m-%d-%Y",
		imgPath:"img/",
		weekStartDay:1*/
		});
	};
</script>

<style type="text/css">
.disablebtn {
	color: white;
}

.vbp_general_sobutton {
	background: #D0D1D4 url(../images/btn_submit.png) repeat-x;
	border: 1px solid #A8A9A8;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
	font-weight: bold;
	min-width: 100px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #666;
	text-shadow: 0 1px 0 #fff;
}

.vbp_general_sobutton a {
	color: #666;
	text-shadow: 0 -1px 0 #fff;
	cursor: pointer;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	padding: 3px 3px 3px 3px;
	text-align: center;
}

.vbp_general_sobutton a:hover {
	text-decoration: none;
	color: #fff;
}
</style>

</head>


<body>




	<table id="Table_01" cellspacing="0" style="width: 960px">

		<tr>
			<td width="960" height="5" colspan="11"
				background="images/qs_homelogin_01.gif"></td>
		</tr>
		<tr id="menu_bar_row">
			<td width="35" height="67" rowspan="3"
				background="images/qs_homelogin_02.gif"></td>
			<td id="pic3" width="177" height="67"
				background="images/qs_homelogin_03.gif" rowspan="3"><a
				href="welcome.jsp"> </a></td>
			<td width="20" height="67" background="images/qs_homelogin_04.gif"
				rowspan="3"></td>
			<td id="pic5" width="140" height="67"
				background="images/qs_homelogin_05.gif" rowspan="3"><a
				href="welcome.jsp"> </a></td>
			<td width="555" height="9" background="images/qs_homelogin_06.gif"
				colspan="6"></td>
			<td width="33" height="67" background="images/qs_homelogin_07.gif"
				rowspan="3"></td>
		</tr>
		<tr>
			<td width="35" height="58" background="images/qs_homelogin_08.gif"
				rowspan="2"></td>
			<td width="511" height="28" style="background-color: #68d1df;"
				colspan="5">
				<%
					if (!(session.getAttribute("role") == null)) {
				%> <!--  insert log out codes here --> <!-- Sign-up and Login Links Starts Here -->



				<label style="margin-top: -5px;" class="vpb_general_button2">

					<%
						if (session.getAttribute("role").equals("0")) {
								out.print("Staff - " + session.getAttribute("name") + "");
							} else if (session.getAttribute("role").equals("1")) {
								out.print("Administrative Officer - "
										+ session.getAttribute("name") + "");
							} else if (session.getAttribute("role").equals("2")) {
								out.print("Management Representative - "
										+ session.getAttribute("name") + "");
							} else if (session.getAttribute("role").equals("3")) {
								out.print("Approver - " + session.getAttribute("name") + "");
								//+ ApprovalSidebar.getPending1()
								//			+ " pending"

							} else if (session.getAttribute("role").equals("4")) {
								out.print("Administrator - " + session.getAttribute("name")
										+ "");
							} else {
								out.print("Viewer - " + session.getAttribute("name") + "");
							}
					%>

			</label> <!-- Sign-up and Login Links Ends Here --> <!-- Code Begins -->

				<div id="vpb_pop_up_background"></div> <!-- General Pop-up Background -->







				<form action="Credential_BLL" method="POST">
					<!-- Login Box Starts Here -->
					<div id="vpb_logout_pop_up_box" class="vpb_logout_pop_up_box">
						<div align="left"
							style="font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-weight: bold;">Staff
							Sign Out Box</div>
						<br clear="all">
						<div align="left"
							style="font-family: Verdana, Geneva, sans-serif; font-size: 11px;">
							To exit this Sign Out box, click outside of this box. <br /> Are
							you sure you want to Sign Out?
						</div>
						<br clear="all">

						<div class="module_content">

							<div class="clear"></div>
						</div>
						<div class="vbp_general_sobutton"
							style="width: 70px; float: right">
							<!-- <a href="javascript:void(0);" class="vpb_general_button" onClick="vpb_hide_popup_boxes();">Cancel</a>  -->
							<a id="logoutsubmit" href='./Logout'>Sign Out</a>
						</div>
					</div>
					<!-- Login Box Ends Here -->
				</form> <!-- end of log out codes --> <%
 	}
 %> <%
 	if (session.getAttribute("name") != null) {

 	} else {
 %> <!-- start of login button code here --> <!-- Code Begins -->
				<div id="vpb_pop_up_background"></div> <!-- General Pop-up Background -->
					<form action="Credential_BLL" method="POST" autocomplete="off">
						<!-- Login Box Starts Here -->
						<div id="vpb_login_pop_up_box" class="vpb_signup_pop_up_box">
							<div align="left"
								style="font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-weight: bold;">Staff
								Sign In Box</div>
							<br clear="all">
							<div align="left"
								style="font-family: Verdana, Geneva, sans-serif; font-size: 11px;">To
								exit this Sign In box, click outside of this box.</div>
							<br clear="all"> <br clear="all">
	
							<div>
	
								<fieldset style="width: 48%; float: left;">
									<!-- to make two field float next to one another, adjust values accordingly -->
									<label>Username</label> <input class="namepass"
										style="width: 80%;" type="text" id="username" name="username">
								</fieldset>
	
								<fieldset style="width: 48%; float: left;">
									<!-- to make two field float next to one another, adjust values accordingly -->
									<label>Password</label> <input class="namepass"
										style="width: 80%;" type="password" name="password">
								</fieldset>
								<div class="clear"></div>
							</div>
							<!-- <a href="javascript:void(0);" class="vpb_general_button" onClick="vpb_hide_popup_boxes();">Cancel</a>  -->
	
							<input style="float: right;" class="disablebtn" id="loginsubmit"
								type="submit" disabled="disabled" value="  Sign In  ">
	
	
	
	
	
						</div>
	
						</div>
						<!-- Login Box Ends Here -->
					</form> <!-- Sign-up and Login Links Starts Here -->
				<label style="margin-top: -5px;" class="vpb_general_button2">Guest</label>
				<!-- Sign-up and Login Links Ends Here --> <!-- end of login button code here -->
				<%
					}
				%>

			</td>
		</tr>
		<tr>
			<td class="topmenu"><a href="QM_qualitymanual.jsp">Quality
					Manual</a></td>
			<td class="topmenu"><a href="Proc_Process.jsp">Process </a></td>
			<%
				if (session.getAttribute("role") != null
						&& session.getAttribute("role").equals("4")) {
			%>
			<td class="topmenu"><a href="role_view.jsp">Administration </a>
			</td>
			<%
				} else {
			%>
			<td class="topmenu"><a href="staffapp_approved.jsp">Appointment
			</a></td>
			<td class="topmenu"><a href="committee_approved.jsp">
					Committee</a></td>
			<%
				}
			%>
			<td class="topmenu">
				<%
					if (session.getAttribute("name") != null) {
				%> <a href="#" onclick="signout();"> Logout</a> <%}else{ %> <a
				href="#" onclick="signout();">Sign In</a> <%} %>
			</td>
		</tr>
		<tr>
			<td width="960" height="156" colspan="11"
				background="images/qs_home_header2.jpg"></td>
		</tr>
	</table>

	<!-- end of header bar -->
	</section>
	<!-- end of secondary bar -->